<script setup lang="ts" name="Permission">
import { ref, onBeforeMount, provide } from 'vue';
import { reqGetPermissionList } from '@/api/acl/permission.ts';
import type { PermissionList } from '@/api/acl/permission-type.ts';
import { useQuasar } from 'quasar';
import type { QTableColumn } from 'quasar';
import TableExpand from './components/TableExpand.vue';
import FormDialog from './components/FormDialog.vue';
import { useCompRef } from '@/utils/useCompRef';
import { ShowDialogFn, permissionKey, MyPermissionList } from './type.ts';
import { reqDeletePermission } from '@/api/acl/permission.ts';
import { useRemoveItem } from '@/hooks/useRemoveItem.ts';

const { notify } = useQuasar();
// 表格列
const columns: QTableColumn[] = [
  { name: 'name', label: '名称', field: 'name', align: 'left' },
  { name: 'code', label: '权限值', field: 'code', align: 'left' },
  { name: 'updateTime', label: '修改时间', field: 'updateTime', align: 'left' },
  { name: 'control', label: '操作', field: 'id', align: 'left' }
];
// 权限菜单
const permissionList = ref<MyPermissionList[]>([]);

async function getPermissionList() {
  try {
    const result = await reqGetPermissionList();
    if (result.code === 200) {
      permissionList.value = result.data as MyPermissionList[];
      expandRow(permissionList.value);
    } else {
      throw new Error('获取权限列表失败');
    }
  } catch (error: any) {
    notify({
      type: 'negative',
      message: error.message,
      position: 'top'
    });
  }
}
onBeforeMount(() => {
  getPermissionList();
});

// 表单组件
const formDialog = useCompRef(FormDialog);
// 展示dialog
const showDialog: ShowDialogFn = (type, data) => {
  formDialog.value?.showFormDialog(type, data);
};
provide(permissionKey, showDialog);

function refreshData(flag?: string) {
  if (flag) {
    getPermissionList();
  }
}

// 把删除菜单权限的逻辑整合到父组件
function deletePermission(id: number) {
  useRemoveItem(
    reqDeletePermission,
    id,
    '确认删除该菜单（功能）？',
    getPermissionList
  );
}
// 已展开表格项
const expanded = ref<number[]>([]);
// 展开已展开的列表项
function expandRow(data: MyPermissionList[]) {
  const expandedArr = [...expanded.value];
  data.some(item => {
    const index = expandedArr.findIndex(id => id === item.id);
    // 没有展开退出循环
    if (index === -1) return true;
    // 设置展开
    item.expand = true;
    // 删除已处理的id
    expandedArr.splice(index, 1);
    // 如果没有剩余已展开项 退出循环
    if (expandedArr.length === 0) return true;
    // 还有待处理项并且children有 递归
    item.children &&
      item.children.length > 0 &&
      expandRow(item.children as MyPermissionList[]);
  });
}
</script>

<template>
  <div>
    <q-table
      :rows="permissionList"
      :columns="columns"
      :rows-per-page-options="[0]"
      hide-pagination
      separator="cell"
    >
      <template #body="props">
        <TableExpand
          :isExpand="true"
          :row-data="props.row"
          @deletePermission="deletePermission"
          v-model:expanded="expanded"
        />
      </template>
      <template v-slot:no-data>
        <div class="full-width row flex-center q-py-md">
          <img src="@/assets/images/notData.png" style="width: 200px" />
        </div>
      </template>
    </q-table>
    <FormDialog ref="formDialog" @refreshData="refreshData" />
  </div>
</template>

<style scoped>
/* code... */
</style>
